<template>
    <div>
        <div class="timelineMain" :style="{ width: props.max * 100 + 'px' }" @drop="Drop"
            @dragover="e => e.preventDefault()">
            <div v-for="(lineObj, index) in props.line" style="position: relative;">
                <div :class="{ lineObjBox: true, current: toRaw(timelineStore.current) == toRaw(lineObj) }"
                    :style="handleLineObjBoxStyle(lineObj.spr, lineObj.config)"
                    @click="timelineStore.setCurrent(props.index, index); console.log(timelineStore.current, lineObj)">
                </div>
                <!-- {{ lineObj }} -->
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { useTimelineStore } from "../store/timeline.ts"
import { toRaw } from "vue"
import type sprType from "../type/spr.d";

const timelineStore = useTimelineStore()
const props = defineProps(['max', 'index', 'line'])

function Drop() {
    timelineStore.addVideo((timelineStore.dragged as sprType), {}, props.index)
}

function handleLineObjBoxStyle(spr: sprType['spr'], config: sprType['config']) {
    // console.log(config)
    return {
        background: `url(${spr.cover}) 50% 50% / contain repeat var(--color-bg-3)`,
        width: 100 * (config.duration || (spr.duration / 1000000)) + 'px',
        left: 100 * (config.offset || 0) + 'px'
    }
}
</script>
<style scoped>
.timelineMain {
    height: 50px;
    background: var(--color-bg-2);
    margin-top: 10px;
}

.lineObjBox {
    top: 5px;
    height: 40px;
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0);
}

.current {
    border: 1px solid hsla(0, 0%, 100%, .9);
}
</style>../type/sprConfig